<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="搜索歌曲、歌手、专辑"
    />
    <div class="greatpipei">
      <h4>最佳匹配</h4>
      <div class="ssas">
        <van-card :thumb="img">
          <template #title>
            <div> 歌手 : {{singName}} <span v-if="yiName">({{yiName}} )</span></div>
          </template>
          <template #num>
            <div @click="location">></div>
          </template>
        </van-card>
      </div>
      <van-card
        :title="'专辑   :' +   zhuangjiid"
        :desc="singName"
        :thumb="this.zhuanjiImg "
      >
        <template #num>
          <div @click="location">></div>
        </template>
      </van-card>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item,index) in  Singlist"
          :key="item.id"
          @click="toplay(index)"
        >
          <p>{{item.name}}</p>
          <p> <img
              src="../../../public/img/2.png"
              alt=""
            > {{item.artists[0].name}} - {{item.album.name}} </p>
          <van-icon
            name="play-circle-o"
            size="30"
          />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getSearch, geSinger, getMusicInfo } from '../../api/search'
export default {
  data: () => ({
    id: '',
    Singlist: [],
    img: '' || 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
    singName: '',
    yiName: '',
    zhuangjiid: '',
    singId: '',
    musicid: '',
    zhuanjiImg: '',
    albumName: '',
    value: '',
    songid: ''
  }),
  created() {
    this.getSearch()
    this.geSinger()
  },
  methods: {
    //获取数据
    async getSearch() {
      const res = await getSearch(this.$store.state.searchName)
      this.Singlist = res.data.result.songs.slice(0, 12)
      // console.log(this.Singlist[0].artists[0].name);
      this.singName = res.data.result.songs[0].artists[0].name
      this.zhuangjiid = res.data.result.songs[8].album.name
      this.singId = res.data.result.songs[0].artists[0].id
      this.$store.state.singId = this.singId
      this.musicid = res.data.result.songs[0].id
      this.getMusicInfo()
      this.value = this.$store.state.searchName

    },
    async geSinger() {
      const res = await geSinger(this.$store.state.searchName)
      this.img = res.data.result.albums[0].artist.picUrl
      this.yiName = res.data.result.albums[0].artist.alias[0]

    },
    async getMusicInfo() {
      const res = await getMusicInfo(this.musicid)
      this.zhuanjiImg = res.data.songs[0].al.picUrl
    },
    toplay(index) {
      console.log(index);
      this.singId = this.Singlist[index].id
      this.$store.state.musicId = this.singId
      this.$router.push('/playmusic')
    },
    //跳转
    location(index) {
      this.$router.push('/musicinfo')
    }
  },
  components: {

  },
  computed: {

  }

}
</script>
<style lang="less" scoped>
.van-card__title {
  line-height: 83px;
  max-height: 60px;
  font-size: 20px;
}
.van-card__num {
  margin-top: -80px;
  font-size: 30px;
}

.ssas {
  .van-card__content {
    padding-top: 30px;
    font-size: 22px;
    span {
      display: inline-block;
      width: 100px;
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
ul {
  width: 100%;
  li {
    width: 100%;
    height: 70px;
    position: relative;
    border-top: 1px dashed #e5e5e5;
    margin-top: 5px;
    p:nth-of-type(1) {
      margin-top: 1px;
      height: 38px;
      line-height: 38px;
      font-size: 20px;
      padding-left: 12px;
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p:nth-of-type(2) {
      width: 80%;
      margin-top: -20px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      padding-left: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      img {
        vertical-align: middle;
        padding-right: 5px;
      }
    }
    .van-icon {
      position: absolute;
      top: 19%;
      right: 4%;
      opacity: 0.5;
    }
  }
}
</style>